<template>
	<view class="content">
		<!-- <u-swiper :list="list1" :height="300"></u-swiper> -->
		 <view id="myVideo">
			 <!-- <video :src="obj.index_vedio" controls ></video> -->
			 <image :src="obj.index_vedio" mode=""></image>
		 </view>
		<view class="notice">
			<text>通知消息</text>
			<u-notice-bar @click="tapMsg" bg-color="#F8F8F8" color="#3FC377" mode="vertical" :list="list"></u-notice-bar>
		</view>
		<view class="group">
			<view class="item" @tap="goShenbao(item)" v-for="(item,index) in obj.cate_list" :key="item.id">
				<text>{{item.name}}</text>
				<image :src="item.image" mode=""></image>
			</view>
			<!-- <view class="item" @tap="goShenbao('玉米')">
				<text>玉米</text>
				<image src="/static/item2.png" mode=""></image>
			</view>
			<view class="item" @tap="goShenbao('大豆')">
				<text>大豆</text>
				<image src="/static/item3.png" mode=""></image>
			</view>
			<view class="item" @tap="goShenbao('花生')">
				<text>花生</text>
				<image src="/static/item4.png" mode=""></image>
			</view>
			<view class="item" @tap="goShenbao('果树')">
				<text>果树</text>
				<image src="/static/item5.png" mode=""></image>
			</view>
			<view class="item" @tap="goShenbao('水稻')">
				<text>水稻</text>
				<image src="/static/item6.png" mode=""></image>
			</view> -->
		</view>
		<view class="problem">
			<view class="title">
				常见问题
			</view>
			<view @click="goQuestion(item.id)" class="colmun" v-for="(item,index) in obj.faq_list" :key="index">
				<text>{{item.title}}</text>
				<image src="../../static/right.png" mode=""></image>
			</view>
			<!-- <view class="colmun">
				<text>播种问题：不出苗怎么办怎嗯嗯嗯嗯嫩嗯嗯嗯嫩恩恩嫩嫩恩恩</text>
				<image src="../../static/right.png" mode=""></image>
			</view>
			<view class="colmun">
				<text>播种问题：不出苗怎么办怎嗯嗯嗯嗯嫩嗯嗯嗯嫩恩恩嫩嫩恩恩</text>
				<image src="../../static/right.png" mode=""></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				list: [],//公告数据
				video_url:'',//视频
				notice_arr:[],//公告数据
				category_arr:[],//分类数据
				msg_arr: [],//
				obj:{}
			}
		},
		onLoad() {
			this.loadData()
			console.log(this.$baseUrl)
		},
		methods: {
			tapMsg(e){
				// e  数组索引
				var id = this.obj.notice[e].id;
				uni.navigateTo({
					url:'/pages/componentA/message/message?title=通知消息&id=' + id
				})
			},
			goQuestion(id){
				uni.navigateTo({
					url:'/pages/componentA/message/message?title=问题详情&id=' + id
				})
			},
			goShenbao(item){
				if(!uni.getStorageSync('token')){
					uni.navigateTo({
						url:'/pages/enter/login'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/componentA/shenbao/shenbao?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			loadData(){
				this.$http.post('/api/index/index').then(res => {
					console.log(res.data.data)
					this.obj = res.data.data;
					this.list = res.data.data.notice.map(item => {
						return item.title
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#myVideo{
		width:690rpx;
		height:300rpx;
		border-radius:20rpx;
		overflow: hidden;
	}
	#myVideo>video{
		width: 100%;
		height: 100%;
		border-radius:20rpx;
	}
	#myVideo>image{
		width: 100%;
		height: 100%;
		border-radius:20rpx;
	}
	.content{
		min-height: 100vh;
		background-color: #F8F8F8;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.notice{
		display: flex;
		justify-items: center;
		align-items: center;
		border-bottom: 1px solid #E3E3E3;
	}
	u-notice-bar{
		flex: 1;
	}
	.group{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		.item{
			width:327rpx;
			height:156rpx;
			background:linear-gradient(0deg,rgba(237,241,246,1),rgba(226,230,237,1));
			border-radius:18px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			text{
				font-size:16px;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(68,68,65,1);
			}
			image{
				width: 90rpx;
				height: 108rpx;
			}
		}
	}
	.problem{
		margin-top: 78rpx;
		background-color: #F8F8F8;
		.title{
			font-size:34rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(51,51,51,1);
		}
		.colmun{
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #DDDDDD;
			text{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(102,102,102,1);
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				flex: 1;
			}
			image{
				width: 11rpx;
				height: 21rpx;
				margin-left: 15rpx;
			}
		}
	}
</style>
